<!--  -->
<template>
  <view class="main-body">
    <view v-if="new_list.length > 0">
      <view class="followNum">
        {{ t("my.myFollowing") }}({{
          new_list && new_list.length ? new_list.length : 0
        }})
      </view>
      <view
        class="list-box flexRow aCenter"
        v-for="(item, index) in new_list"
        :key="index"
        @click="goDetail(item.id)"
      >
        <view class="list-img">
          <image :src="item.avatar" mode="aspectFill"></image>
        </view>
        <view class="list-content">
          <view>{{ item.name }}</view>
          <!-- <view>{{ item.shopNum }} Products {{ item.videoNum }} Videos</view> -->
          <view
            >{{ item.prodCount }} {{ t("my.products") }}, {{ item.videoCount }}
            {{ t("my.videos") }}
          </view>
        </view>
        <view class="list-btn">
          <fui-button
            @click="change_follow(item)"
            :background="item.state ? '#fff' : '$subject-color'"
            :color="item.state ? '$subject-color' : '#fff'"
            borderColor="$subject-color"
            width="100px"
            size="28"
            height="80rpx"
            class="text-button"
          >
            {{ item.state ? t("my.unfollow") : t("my.follow") }}</fui-button
          >
        </view>
      </view>
      <fui-loadmore
        :state="props.state"
        :initText="t('common.pullUpLoading')"
        :text="t('common.loading')"
        :noneText="t('common.noMoreData')"
      ></fui-loadmore>
    </view>
    <empty-data v-if="!new_list || new_list.length == 0" />
  </view>
</template>

<script setup lang="ts">
import { reactive, ref, onBeforeMount, onMounted, watch } from "vue";
import { follow_store } from "../../api/follow";

// 定义i18n
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const props = defineProps({
  list: {
    type: Array,
    default: [],
  },
  state: {
    type: Number,
    default: 1,
  },
});
watch(
  () => props.list,
  (newVal) => {
    new_list.value = newVal;
  }
);
const emits = defineEmits(["goFactory", "changeFollow"]);

const new_list = ref<Array<any>>(props.list);
onMounted(() => {});
// 前往关注的人

const goDetail = (id: string) => {
  emits("goFactory", id);
};
// 取消关注
const change_follow = async (item: object) => {
  const res = await follow_store(item.id);
  if (res.code == 0) {
    item.state = !item.state;
  }
};
</script>
<style scoped lang="scss">
.main-body {
  width: 100%;
  margin: 0 auto;
  .followNum {
    color: #a6a6a6;

    font-size: 28rpx;
  }
  .list-box {
    width: 100%;
    margin: 25rpx auto;
    image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }
  }
  .list-content {
    line-height: 1.8;
    color: #303030;
    flex: 2;
    overflow: hidden;
    margin-left: 15rpx;
    view:nth-child(1) {
      width: 85%;
      font-weight: 600;
      font-size: 30rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    view:nth-child(2) {
      display: inline;
      color: #999;
      font-size: 22rpx;
      padding: 2rpx 8rpx;
      background-color: #f6f6f6;
    }
  }
  .list-img {
    flex: 0.2;
  }
  .list-btn {
    flex: 0.5;
  }
}
.noData {
  text-align: center;
  margin: 25rpx auto;
  font-size: 32rpx;
}
</style>
